<template>
	<view class="userinfo-card" v-if="userInfo" :style="[coverStyle]">
		<view class="top-container">
			<image class="left-avatar" :src="userInfo.profile.avatarUrl" mode="widthFix"></image>
			<view class="right-info">
				<view class="show-info">
					<view class="tips">
						<text class="value">{{userInfo.profile.followeds}}</text>
						<text class="lable">粉丝</text>
					</view>
					<view class="tips">
						<text class="value">{{userInfo.profile.follows}}</text>
						<text class="lable">关注</text>
					</view>
					<view class="tips">
						<text class="value">Lv{{userInfo.level}}</text>
						<text class="lable">等级</text>
					</view>
				</view>
				<view class="edit-info">
					<text>编辑信息</text>
				</view>
			</view>
		</view>
		<view class="middle-content">
			<myuni-tab ref="scroll_tab" class="tab-title" :titleColor="themeType==='light'?'#535355':'#fff'" :title="titleData" @tabChange="tabChanged">
				<view class="info-content">
					<view v-if="currentTabIndex===0" class="">
						<view class="detail-info-card":class="themeType==='light'?'bgc-light':'bgc'">
							<view class="title">基本信息</view>
							<view class="lable">村龄:<text>{{userInfo.createTime|deteFrom(true)}}&nbsp({{userInfo.createTime|dateFormat}}注册)</text></view>
							<view class="lable">性别:<text>{{userInfo.profile.gender===2?"女":"男"}}</text></view>
							<view class="lable">地区:<text>四川成都</text></view>
							<view class="lable">个人简介:<text class="desc"></text>{{userInfo.profile.signature||'该用户比较佛系，个人简介空空如也！'}}</view>
						</view>
						<view class="detail-info-card" :class="themeType==='light'?'bgc-light':'bgc'">
							<view class="play-list-me">
								我的歌单
							</view>
							<myuni-userplaylist :userId="userId"></myuni-userplaylist>
						</view>
					</view>
					<view v-else-if="currentTabIndex===1" class="">
						<myuni-userevent :userId="userId" :page="page"></myuni-userevent>	
					</view>
				</view>
			</myuni-tab>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default{
		props:{
			userId:{
				type:[Number,String],
				default:''
			},
			page:{
				type:Boolean,
				default:false
			},
			cover:{
				type:Boolean,
				default:false
			}
		},
		data(){
			return{
				titleData:['主页','动态'],
				currentTabIndex:0,
				coverStyle:null
			}
		},
		created() {
		  this.initCover()
		},
		computed:{
			...mapState(['themeType','userInfo'])
		},
		methods:{
			initCover(){
				if(this.cover){
					this.coverStyle={
						 "background":`url(${this.userInfo.profile.backgroundUrl}) no-repeat top left`,
						 "padding":"460rpx 20rpx 0"
					}
				}
			},
			tabChanged(val){
				this.currentTabIndex=val.index
			}
		}
	}
</script>

<style lang="scss" scoped>
.userinfo-card{
	margin-top: 20rpx;
	box-sizing: border-box;
	width: 100%;
	border-radius: 20rpx;
	background-size: 100% !important;
	.top-container{
		display: flex;
		.left-avatar{
			width: 160rpx;
			height: 160rpx;
		}
		.right-info{
			display: flex;
			flex: 1;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			.show-info{
				width: 100%;
				display: flex;
				justify-content: space-around;
				.tips{
					display: flex;
					flex-direction: column;
					align-items: center;
					.value{
						font-weight: 700;
						color: #fff;
					}
					.lable{
						color: #535355;
					}
				}
			}
			.edit-info{
				font-weight: 700;
				color: #535355;
			}
		}
	}
	.fiexd-height{
		height: 400rpx;
	}
	.middle-content{
		.info-content{
			color: #807e80;
			.play-list-me{
				color: red;
				font-weight: 600;
			}
			.detail-info-card{
				margin-top: 20rpx;
			   box-sizing: border-box;
			   padding: 20rpx;
			   width: 100%;
			   // background-color: #18191a;
			   border-radius: 20rpx;
			   .title{
			 	  margin: 10rpx 0;
			 	  color: #fff;
			 	  font-weight: 700;
			   }
			   .lable{
			 	  padding: 10rpx 0;
			 	  color: #807e80;
			 	  text{
			 		  padding-left: 10rpx;
			 		  color: #ccc;
			 	  }
			 	  .desc{
			 		  font-size: 26rpx;
					  color: #fff;
			 	  }
			   }
			}
		}
	}
}
</style>
